<template>
  <div id="mo-detail">
    <!--详情页海报-->
    <div class="mode-head">
      <div class="head-return"><router-link to="/movie"><Icon type="ios-arrow-left"></Icon></router-link><span><Icon type="beer"></Icon>电影</span></div>
      <div class="head-img">
        <img :src="movieSrc.medium"/>
      </div>
      <div class="mode-head-bg">
        <img :src="movieSrc.large">
      </div>
    </div>
    <!--详情介绍-->
    <div class="mode-detail">
      <div class="mode-left">
        <div class="large-title">{{movieDetail.title}}</div>
        <ul class="mode-list">
          <li>{{movieDetail.year}}<span v-for="item in movieDetail.genres">/{{item}}</span></li>
          <li>原名：{{movieAka[0]}}</li>
        </ul>
      </div>
      <div class="mode-right">
        <div class="mode-title">豆瓣评分</div>
        <div class="mode-score">{{movieRating.average?movieRating.average:'暂无评分'}}</div>
        <div class="mode-count">{{movieDetail.wish_count}}人</div>
      </div>
    </div>
    <!--看过/想看-->
    <ul class="mode-wish"><li>看过</li><li>想看</li></ul>
    <!--简介-->
    <div class="mode-brief">
      <div class="brief">简介</div>
      <div class="brief-con">{{movieDetail.summary}}</div>
    </div>
    <!--影人简介-->
    <div class="mode-brief">
      <div class="brief">影人</div>
      <div class="casts" ref="castsWrapper">
        <ul ref="castWrapper">
          <li v-for="director in movieDetail.directors"><img :src="director.avatars.small">{{director.name}}</li>
          <li v-for="cast in movieDetail.casts"><img :src="cast.avatars.small">{{cast.name}}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  /* eslint-disable */
  import BScroll from 'better-scroll'
  export default{
    data () {
      return {
        movieDetail: {},
        movieSrc:{},
        movieAka:[],
        movieRating:{}
      }
    },
    created () {
      this.$http.jsonp('https://api.douban.com/v2/movie/subject/'+this.$route.params.id).then( (res) => {
        this.movieDetail = res.data
        console.log(this.movieDetail)
        this.movieSrc = res.data.images // 为什么直接获取data会报渲染函数的错
        this.movieAka = res.data.aka
        this.movieRating = res.data.rating
        this.$nextTick(() => {
          this._initPics()
        })
      }).catch(error => {
        console.log( error)
      })
    },
    watch: {
      // 如果路由有变化，会再次执行该方法
      '$route': '_fatchData'
    },
    methods: {
      _fatchData () {
        this.$http.jsonp('https://api.douban.com/v2/movie/subject/'+this.$route.params.id).then( (res) => {
          this.movieDetail = res.body
          console.log(this.movieDetail)
        }).catch(error => {
          console.log('详情页' + error)
        })
      },
      _initPics () {
        this.$refs.castWrapper.style.width = '805px'
        this.$nextTick(() => {
          this.picScroll = new BScroll(this.$refs.castsWrapper, {
            scrollX: true,
            eventPassthrough: 'vertical'
          })
        })
      }
    }
  }
</script>
<style>
  /*详情部分*/
  #mo-detail{position: fixed; top: 0%;left: 0; background: #fff; z-index: 999; width: 100%; height: 100%;overflow-y: scroll;}
  #mo-detail .mode-head{width: 100%;position: relative;overflow: hidden;}
  #mo-detail .mode-head .head-return{padding:15px;position: relative; z-index: 2;}
  #mo-detail .mode-head .head-return span{color: #fff;line-height: 28px;font-size: 16px;vertical-align: super;display: inline-block; width: 80%; text-align: center;}
  #mo-detail .mode-head .head-return span i{font-size: 18px; line-height: 28px;color: #fff;margin-right: 4px;}
  #mo-detail .mode-head .head-return a{display: inline-block;margin-right: 20px;opacity: 0.8; }
  #mo-detail .mode-head .head-return i{font-size: 28px; line-height: 28px;color: #fff;}
  #mo-detail .mode-head .head-img{position: relative; z-index: 2;padding: 20px 0;display: flex;justify-content: center;}
  #mo-detail .mode-head .mode-head-bg{width: 100%; position: absolute;top: 0;z-index: 1;}
  #mo-detail .mode-head .mode-head-bg img{-webkit-filter: blur(20px);width: 150%;margin-top: -20%; margin-left: -25%;}
  /*详情介绍*/
  #mo-detail .mode-detail{margin: 15px;display: flex;}
  #mo-detail .mode-left{flex: 1;}
  #mo-detail .mode-left .large-title{color: #484649;font-size: 24px;}
  #mo-detail .mode-left .mode-list{color: #999;}
  #mo-detail .mode-right{width: 25%;background: #fff; box-shadow: #e7e7e7 0px 2px 4px;text-align: center;padding: 8px 0;}
  #mo-detail .mode-right .mode-title{color: #cecece;}
  #mo-detail .mode-right .mode-count{color: #999999;}
  #mo-detail .mode-right .mode-score{color: #484649;font-size: 24px;}
  /*看过*/
  #mo-detail .mode-wish{display: flex;padding: 0 15px;}
  #mo-detail .mode-wish li{flex: 1;text-align: center;border: #f8ae33 1px solid;color: #f8ae33;font-size: 14px;border-radius: 4px;padding: 8px 0;}
  #mo-detail .mode-wish li:nth-of-type(1){margin-right: 20px;}
  /*简介*/
  #mo-detail .mode-brief{margin: 0 15px;margin-top: 20px;}
  #mo-detail .mode-brief .brief{color: #999b98;margin-bottom: 8px;font-size: 16px;}
  #mo-detail .mode-brief .brief-con{color: #484848;}
  /*影人*/
  #mo-detail .mode-brief .casts{width: 100%;overflow: hidden;}
  #mo-detail .mode-brief .casts li{display: inline-block;}
</style>
